import { useState } from 'react'
import './leftpanel.less'

const Leftpanel = ({ children }) => {
  const [haveLeftPanel, setHaveLeftPanel] = useState(true)
  const [showLeftPanel, setLeftPanel] = useState('')
  const [leftPanelAnimation, setLeftPanelAnimation] = useState(
    'animate__fadeInLeft'
  )

  //控制左侧面板的展示
  const changeLeftPanelShow = () => {
    if (showLeftPanel === 'none') {
      setLeftPanelAnimation('animate__fadeInLeft')
      setLeftPanel('')
    } else {
      setLeftPanelAnimation('animate__fadeOutLeft')
      setTimeout(() => {
        setLeftPanel('none')
      }, 800)
    }
  }

  return (
    <>
      {haveLeftPanel ? (
        showLeftPanel !== 'none' ? (
          <div
            className={`global-left-panel animate__animated ${leftPanelAnimation}`}
            style={{ display: showLeftPanel }}
          >
            <div
              className="left-control-panel-close"
              onClick={changeLeftPanelShow}
            ></div>
            {children}
          </div>
        ) : (
          <div className="global-left-panel-none">
            <div
              className="left-control-panel-open"
              onClick={changeLeftPanelShow}
            ></div>
          </div>
        )
      ) : null}
    </>
  )
}

export default Leftpanel
